<template>
  <header>
    <div class="logo">
      <a href="">
       <Logo :class="{active: isactive}"/>
      </a>
    </div>
    <ul>
      <li><span>首页</span><Dropdown/></li>
      <li><span>番剧</span></li>
      <li><span>直播</span></li>
      <li><span>游戏中心</span></li>
      <li><span>会员购</span></li>
      <li><span>漫画</span></li>
      <li><span>赛事</span></li>
    </ul>
    <div class="list">
      <el-button type="primary">登录</el-button>
      <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Share style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
    <el-button type="danger">投稿</el-button>
    </div>
  </header>
  </template>
  
  <script  setup>
    import { Button} from 'vant';
import { onMounted, ref } from 'vue';
    import $ from 'jquery'
import { Edit,Share,Delete,Search, Picture, UploadFilled,ElemeFilled } from '@element-plus/icons-vue'
import { Calendar} from '@element-plus/icons-vue'
import { method, split } from 'lodash';
import Swiper from '../components/swiper.vue';
import Upload from '../components/upload.vue';
import Belikesearch from '@/components/Belikesearch.vue';
import Logo from '../components/svg/Logo.vue';
import Dropdown from '../components/svg/dropdown.vue';
import '../utils/changecolor'
// 冒泡排序，升序,返回新数组
Array.prototype.bubble = function () {
  let newarr = [...this]
  // let that = this;
  // // console.log('that', that);
  // let n = this.length;
  // for (let i = 0; i < this.length; i++){
  //   for (let j = 0; j < this.length;j++){
  //   if (this[i] < this[j]) {
  //     let temp = null;
  //     temp = this[i];
  //     this[i] = this[j];
  //     this[j] = temp;
  //   }
  // }
  // }
  // console.log('that', that);
  let n = newarr.length;
  for (let i = 0; i < newarr.length; i++){
    for (let j = 0; j < newarr.length;j++){
    if (newarr[i] < newarr[j]) {
      let temp = null;
      temp =newarr[i];
      newarr[i] = newarr[j];
      newarr[j] = temp;
    }
  }
  }
  return newarr;
}
const color1 = ref('rgb(115, 255, 0)')
const isactive = ref(true)
onMounted(() => {
  let arr = [33,11,44,22,1,5,2,1,6,7,89,0];
  let newarr = arr.bubble()
  console.log(arr,newarr)
  // console.log('数组排序', arr.bubble()) 
 
  // console.log('123')
    $('#value').focus(function () {
        $('#ul').css('display', 'block')
        if ($('#value').text() == '') {
            setTimeout(function () {
            $('#ul').css({
                'transition':'all 3s',
                'display': 'none',
                
            })
        },3000)
        
    }  
    })
    
    
    
    // ul后追加li
    let reg = 'abcdefghigj '
    let value_ = document.querySelector('#value')
    for (let i = 0; i < 15; i++){
       let li = document.createElement('li')
       $('#ul').append(li)
    }
    // 替换li文本内容
    for (let i = 0; i < $('#ul li').length; i++){
        let num = Math.round(Math.random() * 1000)
         $('#ul li')[i].innerText =reg.concat('+'+num)
    }
    // 事件委托
    $('#ul').click(function (e) {
        // 字符串拆分
        let valer = split(e.target.innerText, ' ') 
        // 取值,替换
        value_.value = valer[valer.length - 1]
    })
    
})
// input file 获取上传后的文件名称和大小
const getvalue = () => {
    // 模拟点击上传文件
    document.querySelector('#input').click()
    // 当input['file']内容变化时取出input文件
    document.querySelector('#input').onchange = function () {
        let resultFile = document.getElementById("input").files[0]
        console.log(resultFile)
        $('.inputvalue').text(`文件名称：${resultFile.name},文件大小：${resultFile.size}`)
        // window.alert(`文件名称：${resultFile.name},文件大小：${resultFile.size}`)
    }
    
}




   

    
  </script>
